<template>
  <div class="videoTable" ref="box">
    <div class="head">
      <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd hh:mm:ss" type="daterange"
        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
      <el-button style="margin-right: 10px;" size="mini" type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <el-table v-if="height" :data="list" :height="height-49" stripe size="mini" class="table">
      >
      <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="60" v-if="type==='2'">
        <template slot-scope="scope">
          <i class="icon icon-play" @click="handlePlay(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import { getVideoByTime } from "@/api/page/monitoring.js";

  export default {
    name: "videoTable",
    components: {},
    props: {
      type: {
        type: String
      },
      height: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        dateRange: [],
        tableHeight: 0,
        list: [],
        pickerOptions: {
          shortcuts: [{
              text: "最近一天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              }
            }
          ]
        }
      };
    },
    watch: {},
    computed: {},
    methods: {
      handlePlay(row) {
        this.$emit("play", row);
      },
      handleSearch() {
        let self = this;
        if (self.dateRange == null || self.dateRange.length != 2 || self.dateRange[0] == null || self.dateRange[1] ==
          null) {
          self.$message.error("请先选择时间!");
          return;
        }
        if (self.dateRange[0] == self.dateRange[1]) {
          let dateTime = self.dateRange[0].split(" ");
          self.dateRange[0] = dateTime[0] + " 00:00:00";
          self.dateRange[1] = dateTime[0] + " 23:59:59";
        }
        this.getData();
      },
      async getData() {
        var self = this;
        var camera = self.$parent.$parent.$parent.selectedCamera;
        var obj = {
          accessToken: camera.accessToken,
          deviceSerial: camera.device.number,
          channelNo: camera.channel,
          startTime: self.dateRange[0] == null ? '' : self.formatTimeStr(self.dateRange[0]) + "",
          endTime: self.dateRange[0] == null ? '' : self.formatTimeStr(self.dateRange[1]) + "",
        };
        getVideoByTime(obj)
          .then(response => {
            var rows = response.data;
            self.list = [];
            for (var i = 0; i < rows.length; i++) {
              var obj = rows[i];
              self.list.push({
                startTime: self.formatTimestramp(obj.startTime),
                endTime: self.formatTimestramp(obj.endTime),
                deviceSerial: obj.deviceSerial,
                channelNo: obj.channelNo,
                begin: obj.startTime,
                end: obj.endTime
              });
            }
          })
          .catch(err => {
            self.msgError("操作失败,异常信息：" + JSON.stringify(err));
          });
      },
      formatTimestramp(val) {
        const time = new Date(val);
        const Y = time.getFullYear();
        const M = (time.getMonth() + 1).toString().padStart(2, '0');
        const D = time.getDate().toString().padStart(2, '0');
        const h = time.getHours().toString().padStart(2, '0');
        const m = time.getMinutes().toString().padStart(2, '0');
        const s = time.getSeconds().toString().padStart(2, '0');
        return `${Y}/${M}/${D} ${h}:${m}:${s}`
      },
      formatTimeStr(date) {
        date = date + " 00:00:00";
        date = date.substring(0, 19);
        date = date.replace(/-/g, '/');
        return new Date(date).getTime();
      }
    },
    created() {},
    mounted() {
      let self = this;
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24);
      self.dateRange.push(start);
      self.dateRange.push(end);
      this.getData();
    }
  };
</script>
<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .videoTable {
    .head {
      padding: 10px 0;
      @include flex(space-between, center);

      .datepicker {
        width: 280px;
      }
    }

    .table {
      height: calc(100% - 100px) !important;

      .icon {
        // font-size: 20px;
        cursor: pointer;
        vertical-align: middle;
        margin: 0 2px;
        display: inline-block;
        width: 18px;
        height: 18px;
        background-size: contain;
        background-repeat: no-repeat;
      }

      .icon-play {
        background-image: url("~@/assets/image/icons/play.png");
      }

      .icon-del {
        background-image: url("~@/assets/image/icons/del.png");
      }

      .icon-d {
        background-image: url("~@/assets/image/icons/d.png");
      }

      .icon-d-a {
        background-image: url("~@/assets/image/icons/d-a.png");
      }
    }
  }
</style>
